<template>
  <div>
<!-- 目标: 点击生成按钮, 新增一个li(20以内的随机数字)和删除按钮, 点击删除按钮, 删除对应的li和值 -->

<!-- 提示: 数组渲染列表, 生成和删除都围绕数组操作 -->
  <ul>
    <li v-for="(item,index) in arr" :key="index">
      <span>{{item}}</span>
      <button @click="del(index)">删除</button>
    </li>
  </ul>
  <button @click="a">生成</button>


  </div>
</template>

<script>
export default {
  data() {
    return {
      arr:[]
    }
  },
  methods: {
    a(){
      let random = Math.floor(Math.random()*20)
      this.arr.push(random)
    },
    del(val){
      console.log(val)
      this.arr = this.arr.filter((item,index) => index != val)
    }
  },
}
</script>

<style>

</style>